<template>
  <div class="home-container">

    <div style="display: flex; margin-top: 20px">
      <!--首页左轮播图-->
      <div style="width: 90%;height:380px">
        <div v-if="!lun.length">
          <el-skeleton> animated :throttle="500">
            <el-skeleton-item variant="image" style="width: 100%; height: 380px"/>
          </el-skeleton>
        </div>
        <div v-else>
          <el-carousel height="380px" :interval="3000" style="border-radius: 10px">
            <el-carousel-item v-for="item in lun" :key="item.id">
              <img
                  :src="item.img"
                  style="
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
              "
              />
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <!--首页右公告栏-->
      <el-card style="width: 20%; margin-left: 10px; height:380px; border-radius: 10px">
        <h2 style="margin: 20px 0;cursor: pointer" class="notice" @click="$router.push('/front/notice')">公告列表</h2>
        <div>
          <div v-if="!notices.length">
            <el-skeleton animated variant="rectangular" :rows="6">
              <el-skeleton-tem :height="'50px'"/> <!-- 模拟时间戳区域 -->
              <el-skeleton-item :height="'80px'"/> <!-- 模拟公告内容区域 -->
            </el-skeleton>
          </div>
          <div v-else>
            <el-timeline reverse slot="reference">
              <el-timeline-item
                  v-for="item in notices"
                  :key="item.id"
                  :timestamp="item.time"
              >
                <el-popover
                    placement="right"
                    width="200"
                    trigger="hover"
                    :content="item.info"
                >
                  <span slot="reference" class="notice-headline">{{ item.name }}</span>
                </el-popover>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
      </el-card>
    </div>
    <!--内容筛选栏-->
    <el-card style="margin-top: 20px;margin-bottom: 20px; border-radius: 10px">
      <div class="type-container">
        <div class="type-left">
          <span style="color: orange">内容分类</span>
          <div
              style="
              border-right: 1px solid grey;
              margin-left: 10px;
              height: 20px;
            "
          ></div>
          <span
              style="cursor: pointer; margin-left: 10px"
              :style="{ color: cateId === 0 ? 'blueviolet' : 'black' }"
              @click="changeType(0)"
          >全部</span>
        </div>
        <div class="type-item" v-for="item in types">
          <span
              style="cursor: pointer"
              :style="{ color: cateId === item.id ? 'blueviolet' : 'black' }"
              @click="changeType(item.id)"
          >{{ item.name }}</span
          >
        </div>
        <div class="type-search">
          <el-input v-model="name" placeholder="请输入内容"></el-input>
          <el-button style="margin-left: 10px" @click="load">搜索</el-button>
          <el-button style="margin-left: 10px" type="warning" @click="reset"
          >重置
          </el-button
          >
        </div>
      </div>
    </el-card>
    <!--vue-waterfall2-->
    <!--内容展示区    -->
    <div class="content" >
      <div v-if="!items.length" style="display:flex; justify-content: space-between">
        <el-skeleton animated variant="rectangular" :rows=6 style="width:250px">
          <el-skeleton-item :height="'300px'"/> <!-- 高度根据实际瀑布流项目调整 -->
        </el-skeleton>
        <el-skeleton animated variant="rectangular" :rows=6 style="width:250px">
          <el-skeleton-item :height="'300px'"/> <!-- 高度根据实际瀑布流项目调整 -->
        </el-skeleton>
        <el-skeleton animated variant="rectangular" :rows=6 style="width:250px">
          <el-skeleton-item :height="'300px'"/> <!-- 高度根据实际瀑布流项目调整 -->
        </el-skeleton>
        <el-skeleton animated variant="rectangular" :rows=6 style="width:250px">
          <el-skeleton-item :height="'300px'"/> <!-- 高度根据实际瀑布流项目调整 -->
        </el-skeleton>
      </div>
      <div v-else>
        <waterfall :col="4" :width="350" :data="items">
          <div
              class="cell-item"
              style="border-radius: 10px"
              v-for="(item, index) in items"
              :key="index"
              @click="$router.push('/front/detail?id=' + item.id)"
          >
            <img :src="item.img"  style="border-radius: 10px" alt="加载错误"/>
            <div class="item-body">
              <div class="item-desc">{{ item.name }}</div>
              <div class="item-footer">
                <div class="footer-left">
                  <div class="name">{{ item.user }}</div>
                </div>
              </div>
            </div>
          </div>
        </waterfall>
      </div>
    </div>


  </div>

</template>

<script>
export default {
  name: "FrontHome",
  data() {
    return {
      lun: [],
      notices: [],
      cateId: 0,
      types: [],
      name: "",
      pageNum: 1,
      pageSize: -1,
      total: 0,
      items: [],
    };
  },
  created() {
    this.load();
    this.loadType();
    this.request.get("/carousel").then((res) => {
      this.lun = res.data;
    });
    this.request.get("/notice").then((res) => {
      this.notices = res.data;
    });
  },
  methods: {
    load() {
      this.request
          .get("/item/front/page", {
            params: {
              pageNum: this.pageNum,
              pageSize: this.pageSize,
              name: this.name,
              cateId: this.cateId,
            },
          })
          .then((res) => {
            this.items = res.data.records;
            this.total = res.data.total;
          });
    },
    changeType(id) {
      this.cateId = id;
      this.load();
    },
    loadType() {
      this.request.get("/category").then((res) => {
        this.types = res.data;
      });
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.load();
    },
    reset() {
      this.name = "";
      this.cateId = 0;
      this.load();
    },
  },
};
</script>

<style lang="scss" scoped>
.info {
  height: 15px;
  line-height: 1.2;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /* 这里是超出几行省略 */
  overflow: hidden;
}

.home-container {
  width: 1430px;
  margin: 0 auto;

  .type-container {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .type-left {
      flex: 1;
      display: flex;
      align-items: center;
    }

    .type-item {
      flex: 1;
      text-align: center;
    }

    .type-search {
      display: flex;
    }
  }

  .item-center {
    .el-divider--horizontal {
      display: block;
      height: 1px;
      width: 100%;
      margin: 10px 0;
    }

    margin-top: 20px;
  }
}

.item-body {
  margin: 9px;

  .item-desc {
    text-align: left;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #000000;
  }

  .item-footer {
    display: flex;
    justify-content: space-between;

    .footer-left {
      display: flex;
      align-items: center;
      font-family: SF Pro Display;
      font-style: normal;
      font-weight: normal;
      font-size: 12px;
      line-height: 14px;
      color: rgba(0, 0, 0, 0.6);

      img {
        border-radius: 50%;
        width: 22px;
        height: 22px;
        margin-right: 4px;
      }
    }
  }
}

.cell-item {
  width: 100%;
  height: auto;
  margin: 6px 0 6px 0;
  background: #ffffff;
  overflow: hidden;
  box-sizing: border-box;
  cursor: pointer;
  transition: all .3s ease-in-out;

  img {
    margin-bottom: 16px;
    width: 100%;
    height: auto;
    display: block;
  }
}
.cell-item:hover{
  transform: scale(1.05);
}
h2.notice{
  border-radius: 10px;
  width: fit-content!important;
  padding: 5px;
  border: 1px solid rgba(255,255,255,0);
  transition: all .3s ease-in-out;
}
h2.notice:hover{
  border: 1px solid var(--color-error);
  transition: all .3s ease-in-out;
}
span.notice-headline{
  transition: all .3s ease-in-out;
}
span.notice-headline:hover{
  color: var(--color-error);
  transition: all .3s ease-in-out;
}
</style>
